<template>
  <div :class="['subPage',{'banScroll':modelStatus}]">
    <!-- <div class="subTop">
      <i-tabs :current="tab" @change="handleChange" >
        <i-tab v-for="item in tabList" :key="item.key" :title="item.title" :count="item.count">
        </i-tab>
      </i-tabs>
    </div> -->
    <div class="subTop" >
      <ul class="topTab">
        <li v-for="item in tabList" :key="item.key" :class="{'nowTab':tab===item.key}" @click="handleChange(item.key)" >
          {{item.title}}
        </li>
        <span :class="['slideSpan',{'chooseTabSpan':tab==='tab2'}]" ></span>
      </ul>
    </div>
    <scroll-view 
    :scroll-y="true" 
    style="flex:1;overflow-y:scroll;"  
    @scrolltolower="onReachBottom"  
    v-if="recodeList.length > 0"
    :refresher-enabled="true" 
    @refresherrefresh="onPullDownRefresh"
    :scroll-with-animation='true'>
      <div class="initDiv">
        <div v-for="(item, index) in recodeList" :key='index + item.apt_id' class="item" @click="goDetails(item)">
            <div v-if="tab==='tab1'" class="itemTop clearfix">
              <span v-if="item.category == '0'">
                <img :src="zhuanjiaImg" class="fl" />
                <span class="fl type">{{item.category_str}}</span>
              </span>
              <span v-if="item.category == '1'">
                <img :src="zhuankeImg"  class="fl" />
                <span class="fl type">{{item.category_str}}</span>
              </span>
              <span v-if="item.category == '5'">
                <img :src="medicalImg"  class="fl" />
                <span class="fl type">{{item.category_str}}</span>
              </span>
              <span v-if="item.category == '2'">
                <img :src="tuanduiImg" class="fl" />
                <span class="fl type">{{item.category_str}}</span>
              </span>
              <span v-if="item.category == '3'">
                <img :src="tuwenImg" class="fl" />
                <span class="fl type">{{item.category_str}}</span>
              </span>
              <span v-if="item.category == '4'">
                <img :src="yinpingImg" class="fl" />
                <span class="fl type">{{item.category_str}}</span>
              </span>
              <span class="fr topRight">
                <span>预约时间:</span>
                <span>{{item.yuyueTime}}</span>
              </span>
            </div>
            <div v-else class="itemTop clearfix offlineDiv">
              <span>
                <img src="/static/images/offline.png" class="fl" />
                <span class="fl type" style="margin-left:2px">线下门诊</span>
              </span>
              <span class="fr topRight">
                <span>预约时间:</span>
                <span>{{item.yuyueTime}}</span>
              </span>
            </div>
            <div class="itemBtm clearfix">
              <div class="itemLine1" v-if="tab==='tab1'">
                <!-- 专科未验证/待接诊  状态01 只显示科室名字-->
                <span v-if="(item.category == '1'||item.category == '5') && (item.status == '00'  || item.status == '20' || item.status == '30' || item.status == '31' || item.status == '32' || item.status == '33' || item.status == '06')" class="doctorName">{{item.dept_name}}</span>
                <!-- 团队未验证/待接诊  状态01 只显示团队名字 -->
                <p v-else-if="item.category == '2' && (item.status == '01' || item.status == '20' || item.status == '30' || item.status == '31' || item.status == '32' || item.status == '33'  || item.status == '06')">
                  <span class="doctorName" v-if="item.doctor_name">{{item.doctor_name}}</span><span>{{item.dept_name}}</span>
                </p>
                <p v-else-if="item.category == '0' && (item.status == '01' || item.status == '20' || item.status == '30' || item.status == '31' || item.status == '32' || item.status == '33'  || item.status == '06')">
                  <span class="doctorName" v-if="item.doctor_name">{{item.doctor_name}}</span><span>{{(!item.team_id&&item.positional_title)?item.positional_title:''}}<span><span class="xiegang" v-if="(!item.team_id&&item.positional_title)">/</span></span>{{item.dept_name}}</span>
                </p>
                <p v-else-if="(item.category !== '3' &&item.category !== '4')&&item.status === '04'||item.status === '06' && !item.doctor_name" class="doctorName">
                  {{item.dept_name}}
                </p>
                <p v-else-if="(item.category !== '3' &&item.category !== '4')&&(item.status === '01'||item.detect_result === '0') && !item.doctor_name" class="doctorName">
                  {{item.dept_name}}
                </p>
                <!-- 专科接诊后有医生名称 显示医生以及职称科室 -->
                <p v-else-if="(item.category == '1'|| item.category == '5')&&(item.status === '01'||item.detect_result === '1')" >
                  <span class="doctorName" v-if="item.doctor_name">{{item.doctor_name}}</span><span>{{(!item.team_id&&item.positional_title)?item.positional_title:''}}<span><span v-if="(!item.team_id&&item.positional_title)" class="xiegang">/</span></span>{{item.dept_name}}</span>
                </p>
                <p v-else-if="item.category !== '3' &&item.category !== '4'&&(item.status === '01'||item.detect_result === '1')" >
                  <span class="doctorName" >{{item.doctor_name}}888</span><span>{{item.dept_name}}</span>
                </p>
                <p v-else>
                  <span class="doctorName" v-if="item.doctor_name">{{item.doctor_name}}</span><span>{{(!item.team_id&&item.positional_title)?item.positional_title:''}}<span><span v-if="(!item.team_id&&item.positional_title)" class="xiegang">/</span></span>{{item.dept_name}}</span>
                </p>

              </div>
              <div class="itemLine1" v-else>
                <p>
                  <span class="doctorName" v-if="item.doctor_name">{{item.doctor_name}}</span><span>{{item.doctor_title}}<span><span class="xiegang">/</span></span>{{item.department_name}}</span>
                </p>
              </div>
              <div class="btmFlex" v-if="tab==='tab1'">
                <div class="itemBtmFl">
                  <div class="itemLine1 lineTitle">就诊时间：</div>
                  <div class="itemLine1 lineTitle">就 诊 人：</div>
                  <div class="itemLine1 lineTitle" v-if="item.status == '06' || item.status == '00'">支付时间：</div>
                </div>
                <div class="itemBtmFr">
                  <div class="itemLine1">
                    <span>{{item.jiuzhenTime}}<span class="xiegang" v-if="item.period_name || item.apt_seq">/</span><span v-if="item.period_name">{{item.period_name}}</span> <span v-if="item.apt_seq">{{item.apt_seq}}号</span></span>
                  </div>
                  <div class="itemLine1 clearfix">
                    {{item.patient_name}}
                    <span v-if="item.status !== '06'&&item.status !== '00'" class="fr btn" :style="{background: item.bg_rbg, color:item.text_rbg}">{{item.status_str}}</span>
                  </div>
                  <div class="itemLine1 clearfix" v-if="item.status == '00'||item.status == '06'">
                    <span :style="{color:item.text_rbg}">剩余 {{item.countDown}}</span>
                    <span class="fr btn" :style="{background: item.bg_rbg, color:item.text_rbg}">待支付</span>
                  </div>
                </div>
              </div>
              <div class="btmFlex" v-else>
                <div class="itemBtmFl">
                  <div class="itemLine1 lineTitle">就诊时间：</div>
                  <div class="itemLine1 lineTitle">就 诊 人：</div>
                  <div class="itemLine1 lineTitle" v-if="item.pay_status==='待支付'">支付时间：</div>
                </div>
                <div class="itemBtmFr">
                  <div class="itemLine1">
                    <span>{{item.jiuzhenTime}}<span class="xiegang" v-if="item.sessionname || item.lock_queue_no">/</span>
                    <span v-if="item.sessionname">{{item.sessionname}}</span>
                    <span v-if="item.lock_queue_no">{{item.lock_queue_no}}</span></span>
                  </div>
                  <div class="itemLine1 clearfix" v-if="item.status==='01'">
                    {{item.regular_name}}
                    <span class="fr btn" :style="{background: '#DDFFED', color:'#10C15B'}" >{{item.pay_status}}</span>
                  </div>
                  <div class="itemLine1 clearfix" v-if="item.status==='03'">
                    {{item.regular_name}}
                    <span class="fr btn"  :style="{background: '#FFE9E9', color:'#F82625'}" >{{item.pay_status}}</span>
                  </div>
                  <div class="itemLine1 clearfix" v-if="item.status==='02'">
                    {{item.regular_name}}
                    <span class="fr btn"  :style="{background: '#FFE9E9', color:'#888'}" >{{item.pay_status}}</span>
                  </div>
                  <div class="itemLine1 clearfix" v-if="item.status==='00'">
                    {{item.regular_name}}<br />
                    <span :style="{color:'#FF7F29'}">剩余 {{item.countDown}}</span>
                    <span class="fr btn" :style="{background: '#FFF5EE', color:'#FF7F29'}">{{item.pay_status}}</span>
                  </div>
                </div>
              </div>
              
            </div>

            <div class="payBtn" v-if="tab==='tab2' && item.pay_status==='待支付'" >
              <span @click.stop="showConfirm(item)" >去支付</span>
            </div>
        </div>
      </div>
    </scroll-view>
    <div v-if="recodeList.length == 0&&showFlag" class="noDataImg">
      <img :src="noDataImg"/>
    </div>
    <div v-if="modelStatus" class="bg" @click="modelStatus=false">
      <div class="sure" style="height:420rpx" @click.stop>
        <div class="topic">支付须知</div>
        <p class="payDesc" >      
        您预约线下本院区/东院区门诊医生号源,请确认信息后缴费,如需退号请到线下本院区收费窗口办理！
        </p>
        <div class="btm">
          <!-- <div @click="modelStatus = false" class="cancel">取消</div> -->
          <div class="backBlue" @click.stop="goPay(item)">我知道了</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  let app = getApp()
  import api from '@/api/api'
  const {
    $Toast,
    $Message
  } = require('../../../../../static/iview/base/index')
  import * as types from '@/store/types'
  import { mapState } from 'vuex'
  import nim from '@/utils/nim'
  export default {
    computed: {
      ...mapState([
        'talkInfo'
      ])
    },
    data() {
      return {
        recodeList: [],
        page: 1,
        total: 0,
        imgUrl: '',
        zhuanjiaImg: '',
        zhuankeImg: '',
        medicalImg: require('../../../../../static/images/medical.png'),
        tuanduiImg: '',
        tuwenImg: '',
        yinpingImg: '',
        noDataImg: '',
        showFlag:false,
        modelStatus: false,
        tab:'tab1',
        tabList: [
          {title: '线上问诊', key: 'tab1', count: 0},
          {title: '线下就医', key: 'tab2', count: 0}
        ],
        nowItemInfo:{},
        timer: null
      }
    },
    onShow () {
      this.recodeList = []
      this.imgUrl = api.imgUrl
      let listKey = this.$route.query.key
      if (this.$storage.getNowAppointType()) {
        listKey = this.$storage.getNowAppointType()
      }
      if (listKey) {
        this.getApptList(listKey)
      } else if(this.$route.query.isOffline) {
        this.tab = 'tab2'
        this.recodeList = []
        this.queryList()
      } else {
        this.queryList()
      }
      this.zhuanjiaImg = this.imgUrl + 'zhuanjia.png'
      this.zhuankeImg = this.imgUrl + 'zhuanke.png'
      this.tuanduiImg = this.imgUrl + 'tuandui.png'
      this.tuwenImg = this.imgUrl + 'tuwen.png'
      this.yinpingImg = this.imgUrl + 'yinping.png'
      this.noDataImg = this.imgUrl + 'noData.png'
      nim.reconnection()
    },
    onLoad (options) {
      this.page = 1
      this.total = 0
    },
    onUnload() {
      // 删除查找类型
      this.$storage.removeAppointType()
      this.tab = 'tab1'
      clearInterval(this.timer)
    },
    methods: {
      // 上拉加载更多
      onReachBottom: function() {
        let up = Math.ceil(this.total)
        if (this.page === up) {
          wx.showToast({
            title: '所有预约已加载完毕',
            icon: 'none',
            duration: 2000
          })
          return
        }
        this.page++
        let listKey = this.$route.query.key
        if (listKey) {
          this.getApptList(listKey)
        } else {
          this.queryList()
        }
      },
      // 下拉刷新
      onPullDownRefresh: function() {
        this.page = 1
        this.recodeList = []
        let listKey = this.$route.query.key
        if (listKey) {
          this.getApptList(listKey)
        } else {
          this.queryList()
        }
      },
      getApptList (e) {
         let that = this
        that.$api.apptList({page: 1, rows: that.page*10, apt_type: e*1},({'showLoading': true})).then((res) => {
          let list = []
          that.total = res.data.total / 10
          list = that.recodeList.concat(res.data.rows)
          for (let i = 0; i < list.length; i++) {
            list[i].yuyueTime = list[i].appointment_time ? that.$utils.filterTime(list[i].appointment_time / 1000, 2) : ''
            list[i].jiuzhenTime = list[i].appointment_diagnose_time ? that.$utils.filterTime(list[i].appointment_diagnose_time / 1000, 3) : ''
            if (list[i].status === '06'||list[i].status === '00') {
              let t = list[i].overdue_time / 1000
              let day = Math.floor(t / 86400000);
              let hour = Math.floor((t / 3600000) % 24);
              let min = Math.floor((t / 60000) % 60);
              let sec = Math.floor((t / 1000) % 60);
              hour = hour < 10 ? "0" + hour : hour;
              min = min < 10 ? "0" + min : min;
              sec = sec < 10 ? "0" + sec : sec;
              let format = '';
              if (day > 0) {
                format = `${day}天${hour}时${min}分${sec}秒`;
              }
              if (day <= 0 && hour > 0) {
                format = `${hour}时${min}分${sec}秒`;
              }
              if (day <= 0 && hour <= 0) {
                format = `${min}分${sec}秒`;
              }
              that.$set(list[i], 'countDown', format)
              if (t < 0) {
                continue
              }
              let timer = setInterval(function() {
                t -= 1000
                if (t < 0) {
                  clearInterval(timer)
                  that.getApptList(listKey)  
                  return
                }
                if (t > 0) {
                  let day = Math.floor(t / 86400000);
                  let hour = Math.floor((t / 3600000) % 24);
                  let min = Math.floor((t / 60000) % 60);
                  let sec = Math.floor((t / 1000) % 60);
                  hour = hour < 10 ? "0" + hour : hour;
                  min = min < 10 ? "0" + min : min;
                  sec = sec < 10 ? "0" + sec : sec;
                  let format = '';
                  if (day > 0) {
                    format = `${day}天${hour}时${min}分${sec}秒`;
                  }
                  if (day <= 0 && hour > 0) {
                    format = `${hour}时${min}分${sec}秒`;
                  }
                  if (day <= 0 && hour <= 0) {
                    format = `${min}分${sec}秒`;
                  }
                  if (min == 0 && sec == '00') {
                    that.$set(that.recodeList[i], 'status', '20')
                    that.$set(that.recodeList[i], 'status_str', '逾期支付')
                    that.$set(that.recodeList[i], 'text_rbg', '#F82625')
                    that.$set(that.recodeList[i], 'bg_rbg', '#FFE9E9')
                    let listKey = this.$route.query.key
                    clearInterval(timer)
                    that.getApptList(listKey)
                  }
                  that.$set(list[i], 'countDown', format)
                } else {
                  let listKey = this.$route.query.key
                  clearInterval(timer)
                  that.getApptList(listKey)  
                }
              }, 1000)
              this.timer = timer
            }
          }
          that.recodeList = list
          that.showFlag = true
          wx.stopPullDownRefresh()
        })
      },
      queryList() {
        this.showFlag = false
        if (this.$storage.getNowAppointType() === '2') {
          this.getApptList(2)
          return
        }
        if (this.tab === 'tab2') {
          let that = this
          this.$api.offlineAppointment({page: 1, rows: this.page*10},{'showLoading': true}).then(res=>{
            console.log(res.data,'线下问诊')
            that.recodeList = []
            let list = []
            that.total = res.data.total / 10
            list = that.recodeList.concat(res.data.rows)
          for (let i = 0; i < list.length; i++) {
            list[i].category = '4'
            list[i].yuyueTime = list[i].insert_time ? that.$utils.filterTime(list[i].insert_time, 2) : ''
            list[i].jiuzhenTime = list[i].arrange_day
            if (list[i].status==='00') {
              let t = list[i].overdue_time*1000 - new Date().getTime() + 2000
              // let t = 10000
              // let t = new Date().getTime() + 5000 - new Date().getTime()
              // console.log('t',t)
              let day = Math.floor(t / 86400000);
              let hour = Math.floor((t / 3600000) % 24);
              let min = Math.floor((t / 60000) % 60);
              let sec = Math.floor((t / 1000) % 60);
              hour = hour < 10 ? "0" + hour : hour;
              min = min < 10 ? "0" + min : min;
              sec = sec < 10 ? "0" + sec : sec;
              let format = '';
              if (day > 0) {
                format = `${day}天${hour}时${min}分${sec}秒`;
              }
              if (day <= 0 && hour > 0) {
                format = `${hour}时${min}分${sec}秒`;
              }
              if (day <= 0 && hour <= 0) {
                format = `${min}分${sec}秒`;
              }
              that.$set(list[i], 'countDown', format)
              if(t <= 0) {
                that.queryList()
                continue
              }
              let timer = setInterval(function() {
                t -= 1000
                if(t < 0) {
                  clearInterval(timer)
                  that.queryList()
                  return
                }
                if (t > 0) {
                  let day = Math.floor(t / 86400000);
                  let hour = Math.floor((t / 3600000) % 24);
                  let min = Math.floor((t / 60000) % 60);
                  let sec = Math.floor((t / 1000) % 60);
                  hour = hour < 10 ? "0" + hour : hour;
                  min = min < 10 ? "0" + min : min;
                  sec = sec < 10 ? "0" + sec : sec;
                  let format = '';
                  if (day > 0) {
                    format = `${day}天${hour}时${min}分${sec}秒`;
                  }
                  if (day <= 0 && hour > 0) {
                    format = `${hour}时${min}分${sec}秒`;
                  }
                  if (day <= 0 && hour <= 0) {
                    format = `${min}分${sec}秒`;
                  }
                  if (min == 0 && sec == '00') {
                    that.$set(that.recodeList[i], 'pay_status', '逾期支付')
                    // 倒计时完成后刷新列表
                    clearInterval(timer)
                    setTimeout(() => {
                      that.$api.offlineAppointmentOvertime({order_id:list[i].order_id},({'showLoading': false})).then(res=>{
                        that.queryList()           
                      })
                    }, 500);
                  }
                  that.$set(list[i], 'countDown', format)
                } else {
                  // 倒计时完成后刷新列表
                  clearInterval(timer)
                  setTimeout(() => {
                    that.$api.offlineAppointmentOvertime({order_id:list[i].order_id},({'showLoading': false})).then(res=>{
                      that.queryList()
                    })
                  }, 500);
                }
              }, 1000)
            }
          }
          that.recodeList = list
          wx.stopPullDownRefresh()
          that.showFlag = true
          })
          return
        }
        let that = this
        that.$api.appointmentList({page: 1, rows: that.page*10},({'showLoading': true})).then((res) => {
          let list = []
          that.recodeList = []
          that.total = res.data.total / 10
          list = that.recodeList.concat(res.data.rows)
          for (let i = 0; i < list.length; i++) {
            list[i].yuyueTime = list[i].appointment_time ? that.$utils.filterTime(list[i].appointment_time / 1000, 2) : ''
            list[i].jiuzhenTime = list[i].appointment_diagnose_time ? that.$utils.filterTime(list[i].appointment_diagnose_time / 1000, 3) : ''
            if (list[i].status === '06'||list[i].status === '00') {
              let t = list[i].overdue_time - new Date().getTime() + 2000
              // console.log('t',t)
              let day = Math.floor(t / 86400000);
              let hour = Math.floor((t / 3600000) % 24);
              let min = Math.floor((t / 60000) % 60);
              let sec = Math.floor((t / 1000) % 60);
              hour = hour < 10 ? "0" + hour : hour;
              min = min < 10 ? "0" + min : min;
              sec = sec < 10 ? "0" + sec : sec;
              let format = '';
              if (day > 0) {
                format = `${day}天${hour}时${min}分${sec}秒`;
              }
              if (day <= 0 && hour > 0) {
                format = `${hour}时${min}分${sec}秒`;
              }
              if (day <= 0 && hour <= 0) {
                format = `${min}分${sec}秒`;
              }
              that.$set(list[i], 'countDown', format)
              if (t < 0) {
                continue
              }
              let timer = setInterval(function() {
                t -= 1000
                if (t < 0) {
                  clearInterval(timer)
                  that.queryList()
                  return
                }
                if (t > 0) {
                  let day = Math.floor(t / 86400000);
                  let hour = Math.floor((t / 3600000) % 24);
                  let min = Math.floor((t / 60000) % 60);
                  let sec = Math.floor((t / 1000) % 60);
                  hour = hour < 10 ? "0" + hour : hour;
                  min = min < 10 ? "0" + min : min;
                  sec = sec < 10 ? "0" + sec : sec;
                  let format = '';
                  if (day > 0) {
                    format = `${day}天${hour}时${min}分${sec}秒`;
                  }
                  if (day <= 0 && hour > 0) {
                    format = `${hour}时${min}分${sec}秒`;
                  }
                  if (day <= 0 && hour <= 0) {
                    format = `${min}分${sec}秒`;
                  }
                  if (min == 0 && sec == '00') {
                    that.$set(that.recodeList[i], 'status', '20')
                    that.$set(that.recodeList[i], 'status_str', '逾期支付')
                    that.$set(that.recodeList[i], 'text_rbg', '#F82625')
                    that.$set(that.recodeList[i], 'bg_rbg', '#FFE9E9')
                    // 倒计时完成后刷新列表
                    clearInterval(timer)
                    that.queryList()
                    console.log('内部支付已过期')
                  }
                  that.$set(list[i], 'countDown', format)
                } else {
                  that.$set(that.recodeList[i], 'status', '20')
                  that.$set(that.recodeList[i], 'status_str', '逾期支付')
                  that.$set(that.recodeList[i], 'text_rbg', '#F82625')
                  that.$set(that.recodeList[i], 'bg_rbg', '#FFE9E9')
                  console.log('支付已过期')
                  clearInterval(timer)
                  that.queryList()
                }
              }, 1000)
            }
          }
          that.recodeList = list
          that.showFlag = true
          wx.stopPullDownRefresh()
        })
      },
      goDetails(item) {
        console.log(item, 'item')
        if (this.tab === 'tab2') return
        let obj = {
          apt_id: item.apt_id,
          category: item.category,
          regular_id: item.regular_id,
          doctor_name: item.doctor_name,
          netease_id: item.doctor_netease_id,
          sessionId: 'p2p-' + item.doctor_netease_id,
        }
        this.$store.commit(this.$types.TALK_INFO, obj)
        this.$router.push(`/pages/center/child/appointmentDetails/main?aptId=${item.apt_id}`)
      },
      // 改变tab
      handleChange (key) {
        this.tab = key
        this.recodeList = []
        this.queryList()
      },
      showConfirm(item) {
        this.modelStatus=true
        this.nowItemInfo = item
      },
      // 确认去支付
      goPay () {
        console.log(this.nowItemInfo)
        this.modelStatus = false
        this.$api.orderPayWechatMini({order_id: this.nowItemInfo.order_id}, ({'showLoading': true})).then(res => {
          let that = this
          wx.requestPayment({
            timeStamp: res.data.signMp.timeStamp,
            nonceStr: res.data.signMp.nonceStr,
            package: res.data.signMp.package,
            signType: res.data.signMp.signType,
            paySign: res.data.signMp.sign,
            success (res) {
              mpvue.showLoading({
                title: "加载中...",
                mask: true
              });
              var index = 0;

              that.payTimeInterval = setInterval(() => {
                index++;
                that.$api
                  .appointmentPayResultGet(
                    { order_id: that.details.order_id },
                    { showLoading: false }
                  )
                  .then(temp => {
                    if (temp.data.pay_status == true) {
                      clearInterval(that.payTimeInterval);
                      that.payTimeInterval = null;
                      that.$utils.showToast('text', '支付成功')
                      let data = JSON.stringify(that.details)
                      that.queryList()
                      // that.$router.replace(`/pages/subPage/register/registerSuccess/main?data=${data}`)
                      return;
                    }
                    if (index == 5) {
                      if (temp.data.pay_status == true) {
                        clearInterval(that.payTimeInterval);
                        that.payTimeInterval = null;
                        that.$utils.showToast('text', '支付成功')
                        let data = JSON.stringify(that.details)
                        // that.$router.replace(`/pages/subPage/register/registerSuccess/main?data=${data}`)
                        that.queryList() // 刷新列表
                        return;
                      } else {
                        wx.hideLoading();

                        clearInterval(that.payTimeInterval);
                        that.payTimeInterval = null;
                        that.$utils.showToast('text', '支付失败')
                        that.queryList()
                        return;
                      }
                    }
                  });
              }, 3000);
            },
            fail (res) {
              that.$utils.showToast('text', '支付失败')
              that.queryList()
            }
          })

        })
      }
    }
  }
</script>
<style scoped lang='less'>
  .subPage {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color:#F9F9F9;
  }
  .banScroll {
    overflow: hidden;
  }
  .subTop {
    height: 90rpx;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1rpx solid #DDDDDD;
    box-sizing: border-box;
    ul {
      position: relative;
      height: 100%;
      list-style: none;
      width: 100%;
      font-size: 30rpx;
      color: #666666;
      display: flex;
      li {
        flex: 1;
        text-align: center;
        line-height: 90rpx;
      }
      .nowTab {
        color: #4B7AEA;
        font-weight: 600px;
      }
    }
    .slideSpan {
      position: absolute;
      height: 5rpx;
      width: 135rpx;
      background-color: #4B7AEA;
      bottom: 0;
      left: 16.5%;
      transition: left ease 0.3s;
    }
    .chooseTabSpan {
      left: 66.5%;
    }
  }
  .initDiv {
    // height: 100%;
    padding: 30rpx;
    // margin-top: 70rpx;
    .item {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
      border-radius: 16px;
      margin-bottom: 28rpx;

      .itemTop {
        border-bottom: 1rpx solid #E9E9E9;
        height: 70rpx;
        line-height: 70rpx;
        padding: 4rpx 0;

        .type {
          font-size: 28rpx;
          color: rgba(102, 102, 102, 1);
        }

        img {
          width: 44rpx;
          height: 44rpx;
          margin: 14rpx 7rpx 0 27rpx;
        }

        .topRight {
          font-size: 28rpx;
          margin-right: 25rpx;

          span:nth-child(1) {
            color: #999999;
          }

          span:nth-child(2) {
            color: #333333;
          }
        }
      }
      .offlineDiv {
        background-color: #4A71E8;
        border-radius: 16rpx 16rpx 0 0;
        span {
          color: #fff!important;
        }
      }

      .itemBtm {
        padding: 25rpx 25rpx 34rpx 27rpx;
        font-size: 32rpx;

        .xiegang {
          display: inline-block;
          color: #CCCCCC;
          margin: 0 10rpx;
        }

        .doctorName {
          display: inline-block;
          min-width: 180rpx;
          margin-right: 15rpx;
          font-size: 44rpx;
          font-weight: bold;
          color: rgba(74, 113, 232, 1);
        }

        .btmFlex {
          display: flex;

          .itemBtmFl {
            width: 160rpx;
            .lineTitle {
              font-size: 32rpx;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
          }

          .itemBtmFr {
            margin-left: 35rpx;
            flex: 1;
          }

          .itemLine1 {
            height: 62rpx;
            line-height: 62rpx;
            margin-bottom: 3rpx;

            .btn {
              height: 50rpx;
              line-height: 50rpx;
              display: inline-block;
              padding: 0 22rpx;
              border-radius: 25rpx;
              font-size: 28rpx;
              margin-top: 10rpx;
            }
          }

          .itemLine2 {
            height: 60rpx;
            line-height: 60rpx;
          }
        }
      }
    }
    .payBtn {
      height: 76rpx;
      padding: 20rpx;
      margin-top: -30rpx;
      span {
        float: right;
        height: 76rpx;
        line-height: 76rpx;
        font-size:32rpx;
        border: 1rpx solid #ADADAD;
        border-radius:38rpx;
        padding: 0 50rpx;
        color: #666;
      }
    }
  }
.payDesc {
    color: #666666;
    font-size:30rpx;
    padding: 0 60rpx;
    margin-bottom: 20rpx;
    margin-top: -20rpx;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .topic {
    font-size: 36rpx;
    margin-top: 71rpx;
    margin-bottom: 5rpx;
    height: 60rpx;
    text-align: center;
  }
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  .sure {
    z-index: 2;
    width: 650rpx;
    height: 410rpx;
    overflow: hidden;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -325rpx;
    margin-top: -205rpx;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    font-size: 34rpx;
    .top {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
    }
    .topTips {
      flex: 1;
      margin: 136rpx 100rpx 0 99rpx;
    }
    .btm {
      height: 100rpx;
      display: flex;
      div {
        flex: 1;
        line-height: 100rpx;
        text-align: center;
        background: #f7f8fa;
      }
      div:nth-child(2) {
        background: #4A64EA;
        color: #fff;
      }
      .backBlue {
        background: #4A64EA;
        color: #fff;
      }
    }
  }
}
</style>
